<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 作业</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="chart1" style="width: 800px; height: 500px; margin: 20px auto"></div>
    
    <div id="chart2" style="background-color:#2c343c; width: 800px; height: 500px; margin: 20px auto"></div>
    
    <div id="chart3" style="width: 800px; height: 600px; margin: 0 auto"></div>

    <script>
        // 柱状图
        const chart1 = echarts.init(document.getElementById('chart1'));
        chart1.setOption({
            title: {
                text: '一周内每天的访问量——胡礼枫',
                subtext: '单位：万元',
                textStyle: {
                    fontSize: 18,
                    color: '#333'
                },
                subtextStyle: {
                    fontSize: 14,
                    color: '#666'
                },
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: { type: 'value' },
            series: [{
                type: 'bar',
                data: [320, 402, 431, 398, 520, 630, 710]
            }]
        });

        // 折线图
        const chart2 = echarts.init(document.getElementById('chart2'));
        chart2.setOption({
            title: {
                text: '一周内每天访问量增长趋势——胡礼枫',
                left: 20,
                top: 10,
                textStyle: {
                    fontSize: 20,
                    color: '#fff'
                },
                backgroundColor: '#2c343c',
                borderColor: '#000',
                borderWidth: 2,
                padding: [8, 15]
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: { type: 'value' },
            series: [{
                type: 'line',
                data: [320, 402, 431, 398, 520, 630, 710]
            }]
        });

        // 饼图
        const chart3 = echarts.init(document.getElementById('chart3'));

        // 在前面添加const初始化你的值
        const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        const visits = [320, 402, 431, 398, 520, 630, 710];

        const pieData = []; // 这里是存储转换后的数据
        for (let i = 0; i < days.length; i++) {
            pieData.push({
                name: days[i],
                value: visits[i]
            });
        }

        // 配置项
        const option = {
            title: {
                text: '一周每天的访问量份额占比——胡礼枫',
                link: 'https://www.baidu.com',
                target: 'self',
                left: 'center',
                textStyle: {
                    fontSize: 16,
                    color: '#333',
                    rich: {
                        a: {
                            textDecoration: 'underline',
                            cursor: 'pointer'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                data: pieData, // 使用循环处理后的数据
                radius: '60%',
                label: {
                    show: true,
                    formatter: '{b}: {d}%'
                }
            }]
        };

    chart3.setOption(option);
    </script>
</body>
</html>